<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<!-- 引入ElementUI样式 -->
		<link type="text/css" rel="stylesheet" href="./css/index.css">
		<!-- 引入Vue组件库 -->
		<script type="text/javascript" src="./js/vue.js"></script>
		<!-- 引入ElementUI组件库 -->
		<script type="text/javascript" src="./js/index.js"></script>

		<script type="text/javascript" src="js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">

			<el-container class="operation-wrapper">
				<el-aside v-bind:width="width[num]" >
					<span v-show="!isCollapse">
						<img src="./img/logo.small.png" style="float: left; margin-left: -5px;height: 60px;width: 200px" />
					</span>
					<span v-show="isCollapse">
						<img src="./img/logn.mini.png" style="float: left; margin-left: -5px;height: 60px;" />
					</span>

					<el-menu 
						default-active="1"
						background-color="#304156" 
						text-color="#fff"
						active-text-color="#ffd04b" 
						class="el-menu-vertical-demo"
						:collapse="isCollapse">
						
						<el-submenu :index="menu.id+''" v-for="menu in leftMenu">
							<template slot="title">
								<i :class="menu.menuIcno"></i>
								<span slot="title">{{menu.menuName}}</span>
							</template>
							<el-menu-item :index="child.id+''" v-for="child in menu.children">
								<i :class="child.menuIcno"></i>
								<a style="color: white;text-decoration: none" @click="showContent(child.menuUrl,child.menuName)">{{child.menuName}}</a>
							</el-menu-item>
						</el-submenu>

					</el-menu>

				</el-aside>

				<el-container>

					<el-header>
						<el-button type="success" plain class="toCollapse" @click="toggleCollapse"
							icon="el-icon-s-fold"></el-button>

						<div style="float:right; padding-top: 10px;">
							<el-avatar :src="loginAdmin.hardUrl" shape="square"></el-avatar>
						</div>

						<el-dropdown style="color: #303133; float: right; padding-right: 10px;">
							<span class="el-dropdown-link">
							{{loginAdmin.account}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<el-link :underline="false" @click="showContent('/myList.html','我的主页')">我的主页</el-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="text" @click="dialogFormVisible  = true">修改密码</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-link :underline="false" @click="quit()">退出</el-link>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>

					</el-header>


					<el-main>
						<!--标签页-->
						<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
							<el-tab-pane
									v-for="(item, index) in editableTabs"
									:key="item.name"
									:label="item.title"
									:name="item.name">

								<!--   {{item.content}}-->
								<iframe :src="item.url"  frameborder="0" style="width: 100%;min-height: 1200px"></iframe>
							</el-tab-pane>
						</el-tabs>

					</el-main>

					<el-dialog title="修改密码" :visible.sync="dialogFormVisible">

						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="原密码" prop="pass">
								<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="新密码" prop="newPass">
								<el-input type="password" v-model.number="ruleForm.newPass" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="checkPass">
								<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
							<el-button type="primary" @click="editPassword()">确 定</el-button>
						</div>
					</el-dialog>

					<!--<el-footer>Footer</el-footer>-->
				</el-container>
			</el-container>
		</div>

		<script>
			new Vue({
				el: "#app",
				data(){
					let validatePass = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入密码'));
						} else if(value !== this.loginAdmin.password){
							callback(new Error('与原密码不一致'));
						} else {
							callback();
						}
					};
					let checkNewPass = (rule, value, callback) => {
						if (value === '') {
							return callback(new Error('新密码不能为空'));
						} else if (value == this.loginAdmin.password) {
							callback(new Error('不建议与原密码相同'));
						} else {
							if (this.ruleForm.checkPass !== '') {
								this.$refs.ruleForm.validateField('checkPass');
							}
							callback();
						}
					};
					let validatePass2 = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请再次输入密码'));
						} else if (value != this.ruleForm.newPass) {
							callback(new Error('两次输入密码不一致!'));
						} else {
							callback();
						}
					};

					return {
						isCollapse: false,
						width: ["200px", "60px"],
						num: 0,
						dialogFormVisible :false,
						loginAdmin:[],
						//左侧菜单
						leftMenu:[],
						//标签页 开始
						editableTabsValue: '1',
						editableTabs: [{
							title: '我的主页',
							name: '1',
							url: '/myList.html'
							//content: 'Tab 1 content'
						}],
						timer:null,
						tabIndex: 1,
						ruleForm: {
							pass: '',
							newPass: '',
							checkPass: '',
						},
						rules: {
							pass: [
								{ validator: validatePass, trigger: 'blur' }
							],
							newPass: [
								{ validator: checkNewPass, trigger: 'blur' }
							],
							checkPass: [
								{ validator: validatePass2, trigger: 'blur' }
							],
						},
					}
				},

				//当html页面加在完毕后执行得函数而且只会被执行一次
				created() {
					this.initUser();
					this.initLeftMenu();
				},
				mounted() {
					window.iframeFunction = this.showContent
				},
				methods: {
					//初始化用户信息
					initUser(){
						axios.get("/login/loginAdmin").then(result=>{
							if(result.data.code === 200){
								this.loginAdmin = result.data.data;
							}
						})
					},

					resetForm(formName) {
						this.$refs[formName].resetFields();
					},

					//修改用户密码
					editPassword(){
						this.loginAdmin.password = this.ruleForm.newPass;
						axios.post("/admin/update",this.loginAdmin).then(resp=>{
							if(resp.data.code === 200){
								this.$message({
									showClose: true,
									message: '修改成功',
									type: 'success'
								});
								this.dialogFormVisible = false;
								clearTimeout(this.timer); //清除延迟执行
								this.timer = setTimeout(()=>{  //设置延迟执行
									this.quit();
								},1000);
							}
						})
					},

					resetForm(formName) {
						this.$refs[formName].resetFields();
					},

					//退出系统
					quit(){
						axios.get("/login/quit").then(result=>{
							sessionStorage.clear();
							localStorage.clear();
							location.href = "/login.html";
						})
					},
							
					//动态化侧边栏
					initLeftMenu(){
						axios.get("/permission/list").then(resp=>{
							this.leftMenu=resp.data.data;
						})
					},
									
					// 点击按钮，切换菜单的折叠与展开
					toggleCollapse() {
						this.isCollapse = !this.isCollapse;
						this.num++;
						this.num = this.num % this.width.length;
					},

					//显示当前连接的内容
					showContent(url,menuName){
						// alert(url+","+menuName);
						//直接调用添加页签页
						this.addTab(menuName,url);
					},

					//添加标签页
					addTab(targetName,url) { //targetName 页签页名称   url 对应的地址
						let newTabName = ++this.tabIndex + '';
						//获取所有的标签页
						let tabs = this.editableTabs;
						//定义是否已经标签变量
						let isHaveTab = false;
						//循环所有页签页 判断当前点击标签页名称已经存在
						tabs.forEach((tab, index) => {
							//如果为true 说明当前点击节点（部门管理），已经存在标签页
							if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
								isHaveTab = true;
								newTabName =tab.name;
							}
						});
						//如果不存在 添加一个
						if(!isHaveTab) {
							this.editableTabs.push({
								title: targetName,
								name: newTabName,
								url: url
								//content: 'New Tab content'
							});
						}
						//如果存在，直接让高亮
						this.editableTabsValue = newTabName;
					},

					//移除页签页
					removeTab(targetName) {
						let tabs = this.editableTabs;
						let activeName = this.editableTabsValue;
						if (activeName === targetName) {
							tabs.forEach((tab, index) => {
								if (tab.name === targetName) {
									let nextTab = tabs[index + 1] || tabs[index - 1];
									if (nextTab) {
										activeName = nextTab.name;
									}
								}
							});
						}
						this.editableTabsValue = activeName;
						this.editableTabs = tabs.filter(tab => tab.name !== targetName);
					},

				}
			})
		</script>

		<style>
			* {
				padding: 0;
				margin: 0;
				text-decoration: none;
				/* height: 100%; */
			}

			.operation-wrapper {
				width: 100% !important;
			}
			.el-aside {
				height: calc(100vh);
				overflow-y: auto;
			}
			.el-main {
				padding: 0px 16px !important;
				height: calc(100vh - 61px);
				overflow-y: auto;
			}

			.el-header,
			.el-footer {
				background-color: #fff;
				border-bottom: 2px solid rgba(0, 21, 41, .08);
				color: #333;
				text-align: center;
				line-height: 60px;
			}

			.el-aside {
				background-color: #304156;
				color: #333;
				width: 60px;
				text-align: center;
			}

			.el-main {
				/* background-color: #E9EEF3; */
				color: #333;
				text-align: center;
			}

			body>.el-container {
				margin-bottom: 40px;
			}

			.el-container:nth-child(5) .el-aside,
			.el-container:nth-child(6) .el-aside {
				line-height: 260px;
			}

			.el-container:nth-child(7) .el-aside {
				line-height: 320px;
			}

			.el-menu-vertical-demo:not(.el-menu--collapse) {
				width: 200px;
				min-height: 400px;
				margin-top: 60px;
			}

			.el-aside>.el-menu {
				margin-top: 60px;
			}

			/*.vertical-demo:not(.el-aside--collapse) {*/
			/*	width: 200px;*/
			/*}*/

			.toCollapse {
				width: 40px;
				height: 40px;
				margin: 10px;
				padding: 0px;
				font-size: 32px;
				float: left;
				border-radius: 5px;
			}
		</style>
	</body>
</html>
